<script type="text/javascript">
  $(document).ready(function(){
      $('#kegiatan').focus();
      $('input[type=submit]').click(function(){
          if($('#kegiatan').val() == ''){
              alert('Nama kegiatan harus diisi');
              $('#kegiatan').focus();
              return false;
          }
          if($('#lokasi').val() == ''){
              alert('Lokasi tidak boleh kosong');
              $('#lokasi').focus();
              return false;
          }
          var jumlahCol = $('.col_tr').length,
          i = 0,
          isi = false;
          for(i=1;i<=jumlahCol;i++){
              if($('#col'+i).val() != ''){
                  if($('#idDropzone'+i).val() == ''){
                      alert('Pilih dropzone dengan benar');
                      $('#idDropzone'+i).focus();
                      return false;
                  }
                  if($('#jumlah'+i).val() == '' || ($('#jumlah'+i).val()*1) == 0){
                      alert('Jumlah tidak boleh kosong');
                      $('#jumlah'+i).focus();
                      return false;
                  }
                  isi = true;
              }
          }
          if(!isi){
             alert('Inputan dropzone dan jumlah uang masih kosong');
             return false;
          }
      })
  })  
  function initDropzone(counter){
      $(function(){
          $('#col'+counter).autocomplete("<?php echo site_url('ajax_target')."/getDropzone" ?>",
            {
                parse: function(data){
                    var parsed = [];
                    for (var i=0; i < data.length; i++) {
                        parsed[i] = {
                            data: data[i],
                            value: data[i].batch // nama field yang dicari
                        };
                    }
                    return parsed;
                },
                formatItem: function(data,i,max){
                    return '<div class=result>'+data.nama+'<br>Lokasi: <i>'+data.lokasi+'</i></div>';
                },
                width: 300, // panjang tampilan pencarian autocomplete yang akan muncul di bawah textbox pencarian
                dataType: 'json' // tipe data yang diterima oleh library ini disetup sebagai JSON
            }).result(
            function(event,data,formated){
               $(this).attr('value',data.nama);
               $('#idDropzone'+counter).val(data.id);
            });
        });
  }
</script>
<div class="judul"><?php echo anchor("/collecting_day/", $title);?></div>
<?php
  $flashdata = $this->session->flashdata('message');
  $messages = isset ($flashdata)?pesan($flashdata):"";
  echo "$messages";
?>  
<?php
  echo form_open("$subLink");
?>
<div class="data-input">
    <fieldset>
        <legend><?php echo "$formTitle";?></legend>
        <label>Petugas</label><span style="font-size: 11px;padding-top: 7px;"><?php echo $this->session->userdata('nama');?></span>
        <label>Kegiatan</label><?php echo form_input("kegiatan",'',"id='kegiatan'");?>
        <fieldset class="field-group">
            <label>Tanggal</label><?php echo form_input("tanggal", date("d/m/Y"), "id='tanggal' class='datepicker-input'");?>            
        </fieldset>
        <label>Lokasi</label><?php echo form_input("lokasi");?>
    </fieldset>
</div>
<input type="button" value="Tambah Baris" id="tambahBaris" class="button" style="margin-bottom: 5px;" />
<div class="data-list">
    <table id="tblColDay" class="table-input" style="width: 50%">
        <tr>
            <th style="width: 10%">No</th>
            <th style="width: 50%">Dropzone</th>
            <th>Jumlah (Rp.)</th>
            <th style="width: 10%">Aksi</th>
        </tr>
        <?php
          for($i = 1; $i <= 2; $i++){
        ?>
        <tr class="col_tr <?= ($i % 2 == 0) ? 'even' : 'odd' ?>">
            <td align="center"><?php echo "$i";?></td>
            <td><?php echo form_input("dropzone[]", "", "id='col$i' style='width: 80%' class='dropzone'");?><input type="hidden" name="idDropzone[]" id="idDropzone<?php echo "$i";?>" class="id_dropzone"/></td>
            <td><?php echo form_input("jumlah[]", "", "id='jumlah$i' class='right' onkeyup='formatNumber(this)'");?></td>
            <td><input type="button" onClick="removeMe(<?php echo "$i";?>,this)" value="Hapus" /></td>
        </tr>
        <script type="text/javascript">
           initDropzone(<?php echo "$i";?>);
        </script>    
        <?php
          }
        ?>
    </table>
</div>
<div class="field-group">
    <?php
      echo form_submit("add","Simpan", "class='button' style='margin-right:2px'");
      echo form_button('Batal','Batal', 'class=button onClick='."javascript:location.href='".base_url()."index.php/collecting_day/'".'');
    ?>
</div>
<?php
  echo form_close();
?>
<script type="text/javascript">
    counters = $('.col_tr').length+1;
    $(document).ready(function(){
        $('#tambahBaris').click(function(){
            var counter = counters++,
            number = $('.col_tr').length+1;
            var string = "<tr class='col_tr'>"+
                "<td align='center'>"+number+"</td>"+
                "<td><input type='text' name='dropzone[]' id='col"+number+"' style='width:80%' class='dropzone'/><input type='hidden' name='idDropzone[]' id='idDropzone"+number+"' class='id_dropzone'/></td>"+
                "<td><input type='text' name='jumlah[]' id='jumlah"+number+"' class='right'></td>"+
                "<td><input type='button' onClick='removeMe("+number+",this)' value='Hapus' /></td></tr>";
            $('#tblColDay').append(string);
            if(number % 2 == 1){
                $('.col_tr:eq('+(number-1)+')').addClass('odd');
            }else if(number % 2 == 0){
                $('.col_tr:eq('+(number-1)+')').addClass('even');
            }
            initDropzone(number);
        })
    })
    function removeMe(count,el){
    var parent = el.parentNode.parentNode;
    parent.parentNode.removeChild(parent);
    var col=$('.col_tr');
    var countCollectTr=col.length;
    for(var i=0;i<countCollectTr;i++){
        $('.col_tr:eq('+i+')').children('td:eq(0)').html(i+1);
        $('.col_tr:eq('+i+')').removeClass('even');
        $('.col_tr:eq('+i+')').removeClass('odd');
        if((i+1) % 2 == 1){
            $('.col_tr:eq('+i+')').addClass('even');
        }else{
            $('.col_tr:eq('+i+')').addClass('odd');
        }
        $('.col_tr:eq('+i+')').children('td:eq(1)').children('.dropzone').attr('id', 'col'+(i+1));
        $('.col_tr:eq('+i+')').children('td:eq(1)').children('.id_dropzone').attr('id', 'idDropzone'+(i+1));
        $('.col_tr:eq('+i+')').children('td:eq(1)').children('.right').attr('id', 'jumlah'+(i+1));
    }}
</script>